<template>
 <div class="form-submit">
   <el-card>
     <el-form :model="form" label-width="80px" ref="form" :rules="rules">
       <el-form-item label="问题内容" ref="form">
         <el-input disabled type="textarea" v-model="form.question"></el-input>
       </el-form-item>
       <el-form-item label="留言时间">
         <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" disabled v-model="form.questionTime"></el-date-picker>
       </el-form-item>
       <el-form-item label="答复内容" prop="apply">
         <el-input type="textarea" v-model="form.apply"></el-input>
       </el-form-item>
       <el-form-item label="答复时间">
         <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="form.applyTime"></el-date-picker>
       </el-form-item>
       <el-form-item label="答复单位" prop="applyUnit">
         <el-input v-model="form.applyUnit"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="handleClear('form')">清空</el-button>
         <el-button type="primary" @click="handleSubmit('form')">提交</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'formSubmit',
  data () {
    return {
      form: {
        question: 'qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq',
        questionTime: '',
        apply: '',
        applyTime: '',
        applyUnit: ''
      },
      rules: {
        apply: [
          { required: true, message: '请输入回答', trigger: 'blur' },
          { min: 1, max: 10, message: '请输入1到10个字符', trigger: 'blur' }
        ],
        applyUnit: [
          { required: true, message: '请输入单位', trigger: 'blur' },
          { min: 1, max: 10, message: '请输入1到10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.form.questionTime = moment(new Date()).format('yyyy-MM-DD')
    this.form.applyTime = moment(new Date()).format('yyyy-MM-DD')
    console.log(moment(new Date()))
    console.log(this.form.applyTime)
  },
  methods: {
    handleSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form)
        } else {
          return false
        }
      })
    },
    handleClear (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
